<template>
    <div>
        <!-- v-model写在select上，关联的值是option的value -->
        <select name="" id="" v-model="nba">
            <option value="kb">科比</option>
            <option value="qd">乔丹</option>
            <option value="dlt">杜兰特</option>
            <option value="afs">艾弗森</option>
            <option value="anr">奥尼尔</option>
            <option value="glf">给力芬</option>
        </select>
        <br>

        <!-- 单选框 -->
        性别：
        <input type="radio" v-model="xb" value="nan">男
        <input type="radio" v-model="xb" value="nv">女
        <br>

        <!-- 复选框 -->

        <!-- 当vue的数据变量是数组的时候，此时v-model绑定的是复选框的value属性 -->
        爱好:
        <input type="checkbox" v-model="hobby" value="shui">睡
        <input type="checkbox" v-model="hobby" value="chi">吃
        <input type="checkbox" v-model="hobby" value="wan">玩
        <input type="checkbox" v-model="hobby" value="he">喝
        <br>
        <!-- 当vue的数据变量是布尔值的时候，此时v-model绑定的是复选框的checked属性 -->
        是否同意此协议
        <input type="checkbox" v-model="selected">
        <br>
        <!-- 文本域 -->
        自我介绍：
        <br>
        <textarea name="" id="" cols="30" rows="10" v-model="zwjs"></textarea>
        <br>
    </div>
</template>

<script>
    /**
     * 目标：下拉列表、单选框、复选框、文本域 应用 v-model
     */
    export default {
        data() {
            return {
                nba: 'kb',
                xb: 'nan',
                hobby: ['wan'],
                selected: true,
                zwjs: '黄树杰yyds'
            }
        }
    }
</script>

<style>

</style>